
<template>
  <!-- plain?'plain--'+themeColor+'--theme-class':themeColor+'--theme-class' -->
  <u-button
    @click="btnClick($event)"
    hover-class="none"
    :class="classN"
    :style="{
      width:width,
      height:height,
      opacity:classN==''?opacity:classOpacity,
      'font-size':fontSize!=26?fontSize+'rpx':classFontSize,
    }"
    data-name="3333"
    :plain="classN==''?plain:classPlain"
    :shape="classN==''?shape:classShape"
    :icon="icon"
  >
    <view class="button-text" v-if="!isLoading">
      <i v-if="icon!=''" :class="['iconfont' ,icon,isIcon?'button-icon':'']"></i>
      <slot></slot>
    </view>
    <view class="button-text button-loading" v-else>
      <i class="iconfont pdxloading1"></i>
      <slot></slot>
    </view>
  </u-button>
</template>

<script>
export default {
  name: "c-button",
  props: {
    //类型
    classN: {
      type: String,
      default: "noplain-active"
    },
    //文字前面是否有图标,图标iconfont值
    icon: {
      type: String,
      default: ""
    },
    //按钮主题颜色 theme 目前主题颜色有蓝、紫、灰、绿
    themeColor: {
      type: String,
      default: 'blue'
    },
    //字体大小
    fontSize: {
      type: Number,
      default: 28
    },
    //按钮透明度 (0-1之间的正数)
    opacity: {
      type: Number,
      default: 1,
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 按钮是否镂空
    plain: {
      type: Boolean,
      default: false
    },
    // 按钮形状，circle（两边为半圆），square（带圆角）
    shape: {
      type: String,
      default: 'square'
    },

    //元素宽度
    width: {
      type: String,
      default: "auto"
    },
    height: {
      type: String,
      default: "100rpx"
    },
    //是否是纯图标按钮
    isIcon: {
      type: Boolean,
      default: false
    },
    //是否添加loading
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      text: "确定",
      classWidth: 'auto',
      classHeight: 'auto',
      classOpacity: 1,
      classFontSize: '28rpx',
      classShape: '',
      classPlain: false
    };
  },
  created () {
    if (this.classN === 'plain-active') {
      this.classPlain = true
      this.classShape = 'circle'
    }
    if (this.classN === 'plain-noactive') {
      this.classPlain = true
      this.classShape = 'circle'
    }
    if (this.classN === 'noplain-active') {
      this.classPlain = false
      this.classShape = 'circle'
    }
    if (this.classN === 'special-left-btn') {
      this.classPlain = true
      this.classShape = 'circle'
    }
    if (this.classN === 'special-right-btn') {
      this.classPlain = true
      this.classShape = 'circle'
    }
  },

  components: {},

  computed: {},

  methods: {
    btnClick (e) {
      this.$emit('click', e);
    }
  }
}

</script>
<style lang='scss' scoped>
// $c-color-default: transparent;
// $c-color-white: #fff;
// $c-color-green: #01c21c;
// $c-color-purple: #664fea;
// $c-color-blue: #476bff;
// $c-color-gray: #989896;
// .blue--theme-class {
//   color: #fff;
//   background: $c-color-blue;
// }
// .plain--blue--theme-class {
//   color: $c-color-blue;
// }
// .green--theme-class {
//   color: #fff;
//   background: $c-color-green;
// }
// .plain--green--theme-class {
//   color: $c-color-green;
// }
// .purple--theme-class {
//   color: #fff;
//   background: $c-color-purple;
// }
// .plain--purple--theme-class {
//   color: $c-color-purple;
// }
// .gray--theme-class {
//   color: #fff;
//   background: $c-color-gray;
// }
// .plain--gray--theme-class {
//   color: $c-color-gray;
// }
.button-text {
  display: flex;
  align-items: center;
  i {
    margin-right: 10rpx;
  }
}
.button-loading {
  opacity: 0.9;
  i {
    animation: loadingRotate 1s linear infinite;
  }
}
@keyframes loadingRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button-icon {
  margin-right: 10rpx;
}
.u-btn {
  &::after {
    border: none !important;
  }
}
// 固定的class
.plain-active {
  margin: 0 10rpx;
  padding: 20rpx 35rpx;
  color: $theme-color;
  line-height: 1;
  border: 1rpx solid $theme-color;
}
.plain-noactive {
  margin: 0 10rpx;
  padding: 20rpx 35rpx;
  line-height: 1;
  color: #999;
  border: 1rpx solid #999;
}
.noplain-active {
  margin: 0 10rpx;
  padding: 20rpx 35rpx;
  color: #fff;
  line-height: 1;
  border: 1rpx solid transparent;
  background: $theme-color;
}
.noplain-noactive {
  margin: 0 10rpx;
  padding: 20rpx 35rpx;
  color: #fff;
  line-height: 1;
  background: #999;
}
//左渐变右边正常
.special-left-btn {
  line-height: 1;
  text-align: center;
  color: #fff;
  border-radius: 0;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
  background-image: linear-gradient(to right, #ffc603, #ffb304);
}
.special-right-btn {
  line-height: 1;
  text-align: center;
  color: #fff;
  border-radius: 0;
  border-top-right-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  background-color: #476bff;
}
</style>